//折线图
<template>
  <div ref="echarts"
       class="main"></div>
</template>

<script>
import * as echarts from 'echarts';

export default {
  data () {
    return {
    }
  },
  props: {
    option: {
      type: Object,
      default: () => ({})
    }
  },
  // 当都组件的数据发生改变，使用watch去监听，然后重新赋值给option
  watch: {
    option: {
      handler (newval, oldval) {
        console.log(newval, oldval);
        this.option = newval
        this.init()
      },
      deep: true,
    },
  },
  methods: {

    init () {
      var myChart = echarts.init(this.$refs.echarts);
      console.log("option", this.option);
      const { xAxisData, yAxisData, lowColor, topColor, yAxisName } = this.option
      myChart.setOption(
        {
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'cross',
              label: {
                backgroundColor: '#6a7985'
              }
            }
          },
          xAxis: {
            type: 'category',
            boundaryGap: false,
            data: xAxisData //x轴数据
            // data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', "8月", "9月", "10月", "11月", "12月"]
          },
          yAxis: {
            type: 'value',
            name: yAxisName,
            min: 0, //最小值
            max: 100, // 最大值
            interval: 20, //间隔值
          },
          series: [
            {
              // name: '销量',
              type: 'line',
              stack: 'Total',
              smooth: true,
              lineStyle: {
                width: 0
              },
              showSymbol: false,
              areaStyle: { //渐变图表颜色
                opacity: 0.8,
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  {
                    offset: 0,
                    color: topColor //最底部颜色
                  },
                  {
                    offset: 1,
                    color: lowColor //最顶部颜色
                  }
                ])
              },
              emphasis: {
                focus: 'series'
              },
              data: yAxisData //y轴数据
            },
          ]
        }
      );
      window.addEventListener("resize", () => {
        myChart.resize();
      });
    },
  },
  created () {

  },
  mounted () {
    setTimeout(this.init(), 1000);
  }
}
</script>

<style scoped>
.main {
  width: 100%;
  height: 3.25rem;
}
</style>
